// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
// sass-lint:disable no-color-literals, no-qualifying-elements
////
/// @group 全局
////
@import 'util/util';

/// 字体大小属性应用于`<html>`和`<body>`。我们默认使用100%，因此该值继承自用户的浏览器设置。
/// @type Number
$global-font-size: 100% !default;

/// 您网站的全局宽度。由网格确定行宽。
/// @type Number
$global-width: rem-calc(1200) !default;

/// 所有类型的默认行高。`$global-lineheight`是24px而`$global-font-size`是16px
/// @type Number
$global-lineheight: 1.5 !default;

/// 用于按钮，标注，链接等的颜色必须有一种主色
/// @type Map
$foundation-palette: (
  primary: #1779ba,
  secondary: #767676,
  success: #3adb76,
  warning: #ffae00,
  alert: #cc4b37,
) !default;

/// 浅灰用户界面项目的颜色
/// @type Color
$light-gray: #e6e6e6 !default;

/// 中灰用户界面项目的颜色
/// @type Color
$medium-gray: #cacaca !default;

/// 深灰用户界面项目的颜色
/// @type Color
$dark-gray: #8a8a8a !default;

/// 黑色用户界面项目的颜色
/// @type Color
$black: #0a0a0a !default;

/// 白色用户界面项目的颜色
/// @type Color
$white: #fefefe !default;

/// 文档主体的背景颜色
/// @type Color
$body-background: $white !default;

/// 文档主体的文本颜色
/// @type Color
$body-font-color: $black !default;

/// 文档主体字体系列
/// @type List
$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif !default;

/// 设置为`true`以启用抗锯齿类型，使用`-webkit-font-smoothing`和`-moz-osx-font-smoothing` CSS属性。
/// @type Boolean
$body-antialiased: true !default;

/// 组件外边距的全局值。
/// @type Number
$global-margin: 1rem !default;

/// 组件内边距的全局值。
/// @type Number
$global-padding: 1rem !default;

/// 在组件上定位的全局值。
/// @type Number
$global-position: 1rem !default;

/// 普通类型的全局字体粗细。
/// @type Keyword | Number
$global-weight-normal: normal !default;

/// 粗体类型的全局字体粗细。
/// @type Keyword | Number
$global-weight-bold: bold !default;

/// 具有外边框圆角所有元素的全局值。
/// @type Number
$global-radius: 0 !default;

/// 所有菜单样式的全局值。可以在单个菜单组件级别上覆盖。
/// @type Number
$global-menu-padding: 0.7rem 1rem !default;

/// 所有菜单样式的全局之。嵌套菜单的外边距。
$global-menu-nested-margin: 1rem !default;

/// 设置CSS的文本方向。可以是`ltr`或`rtl`。
/// @type Keyword
$global-text-direction: ltr !default;

/// 为支持它的组件启用flexbox。
/// @type Boolean
$global-flexbox: true !default;

/// 如果适用的话，启用原型的响应断点
/// @type Boolean
$global-prototype-breakpoints: false !default;

/// 按钮光标的值，默认为“auto”
/// @type Keyword
$global-button-cursor: auto !default;

@if not map-has-key($foundation-palette, primary) {
  @error 'In $foundation-palette, you must have a color named "primary".';
}

// 用于文本方向的内部变量
$global-left: if($global-text-direction == rtl, right, left);
$global-right: if($global-text-direction == rtl, left, right);

// 包含 flex 对齐方式的内部变量
$-zf-flex-justify: -zf-flex-justify($global-text-direction);

/// 颜色选择对比的全局差值。
/// @type Number
$global-color-pick-contrast-tolerance: 0 !default;

// 用于颜色的内部变量
@include add-foundation-colors;

// Foundation 全局样式混合宏
@mixin foundation-global-styles {
  @include foundation-normalize;

  // 这些样式应用于<meta>标记，该标记由 Foundation JavaScript 读取
  .foundation-mq {
    font-family: '#{-zf-bp-serialize($breakpoints)}';
  }

  html {
    box-sizing: border-box;
    font-size: $global-font-size;
  }

  // 设置盒子模型的全局尺寸处理内边距和边框宽度
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }

  // 默认文档主题样式
  body {
    margin: 0;
    padding: 0;

    background: $body-background;

    font-family: $body-font-family;
    font-weight: $global-weight-normal;
    line-height: $global-lineheight;
    color: $body-font-color;

    @if ($body-antialiased) {
      -webkit-font-smoothing: antialiased; // sass-lint:disable-line no-vendor-prefixes
      -moz-osx-font-smoothing: grayscale; // sass-lint:disable-line no-vendor-prefixes
    }
  }

  img {
    // 通过使用 display: inline-block 的方式来消除图片下的间隙
    display: inline-block;
    vertical-align: middle;

    // 网格默认为使图像或嵌入式内容工作正常
    max-width: 100%;
    height: auto;
    -ms-interpolation-mode: bicubic;
  }

  // 确保文本域高度自适应
  textarea {
    height: auto;
    min-height: 50px;
    border-radius: $global-radius;
  }

  // 默认情况下，选择元素的宽度为100%
  select {
    box-sizing: border-box;
    width: 100%;
    border-radius: $global-radius;
  }

  // Google Maps 和 MapQuest 正确嵌入样式
  // sass-lint:disable-line no-ids
  .map_canvas,
  .mqa-display {
    img,
    embed,
    object {
      max-width: none !important;
    }
  }

  // 重置大多数浏览器自身的按钮样式
  button {
    @include disable-mouse-outline;
    padding: 0;
    appearance: none;
    border: 0;
    border-radius: $global-radius;
    background: transparent;
    line-height: 1;
    cursor: $global-button-cursor;
  }

  // 在 pre 标签张防止文本溢出
  pre {
    overflow: auto;
  }

  // 重置元素字体样式使用 inherit
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
  }

  // 用户在 Javascript 中隐藏/显示的内部样式
  .is-visible {
    display: block !important;
  }

  .is-hidden {
    display: none !important;
  }
}
